<template>
  <div :class="['chapter-list', { active: chapterFlag }]">
    <div class="chapter-wrap">
      <div
        class="chapter-item"
        v-for="(item, index) in tableData"
        :key="item.id"
      >
        <h3>{{ ++index }} {{ item.name }}</h3>
        <ul>
          <li v-for="(v, idx) in item.childList" :key="v.id">
            <span class="chapter-name"
              >{{ index }}.{{ ++idx }} {{ v.name }}</span
            >
            <div class="resource" v-if="v.childList.length">
              <div
                class="resource-item"
                v-for="(m, i) in v.childList"
                :key="m.id"
                @click="handleClick(m, index, idx, i)"
              >
                <span>{{ index }}.{{ idx }}.{{ ++i }} </span>
                <b>{{ m.type | typeFilter }}：</b>
                <span class="resource-name"> {{ m.name }}</span>
              </div>
            </div>
            <div v-else>
              <span class="no-data">暂无数据</span>
            </div>
          </li>
        </ul>
        <div class="line"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash'
export default {
  data() {
    return {
      courseId: this.$route.query.id,
      tableData: [],
    }
  },
  props: ['chapterFlag'],
  mounted() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      let res = await this.$store.dispatch('queryOpenApiSysCourseChapter', {
        pid: 0,
        courseId: this.courseId,
      })
      this.tableData = res.data
      // this.getVideo()
      // console.log(this.tableData)
      if (!this.tableData.length) {
        this.warnMsg('本课程暂无学习资源')
        return
      }
      this.init()
    },
    // async getVideo() {
    //   let res = await this.$store.dispatch('queryOpenApiSysKnowledgeList', {
    //     courseId: 227,
    //     chapterId: 470,
    //   })
    //   console.log(res)
    // },
    init() {
      let res = cloneDeep(this.tableData)
      let resData = this.flatObj(res).filter((v) => v.type != 1 && v.type != 2)
      if (!resData.length) {
        this.warnMsg('本课程暂无学习资源')
        return
      }
      let { cId } = this.$route.query
      if (cId) {
        //播放页面
        let data = resData.filter((v) => v.id == cId)
        this.$bus.$emit('sendResourceInfo', data[0])
      } else {
        //非播放页面
        this.$bus.$emit('sendResourceInfo', resData[0])
        this.changeChapter(resData[0])
      }
    },
    handleClick(row, index, idx, i) {
      let sort = index + '.' + idx + '.' + i + row.name
      this.$bus.$emit('sendResourceInfo', row)
      this.$emit('changeChapterFlag', false)
      this.changeChapter(row, sort)
    },
    changeChapter(row, sort) {
      this.$router.push({
        name: 'course-home-play',
        query: {
          id: row.courseId,
          cId: row.id,
          sort,
        },
      })
    },
  },
  filters: {
    typeFilter(type) {
      switch (type) {
        case '31':
          return '资源'
        case '32':
          return '作业'
        case '33':
          return '实验'
        case '34':
          return '考试'
        default:
          return type
      }
    },
  },
}
</script>
<style scoped lang="scss">
.chapter-list {
  position: absolute;
  left: -400px;
  top: 0;
  bottom: 0;
  width: 400px;
  z-index: 2;
  background: #26292c;
  transition: all 0.3s;
  &.active {
    left: 60px;
  }
  .chapter-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 10px;
    overflow-y: auto;
    box-sizing: border-box;
    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 0;
    }
    &::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 4px;
      height: 10x;
    }
    &::-webkit-scrollbar-thumb {
      cursor: pointer;
      border-radius: 5px;
      transition: color 0.2s ease;
      background-color: #999;
    }
  }
  .chapter-item {
    h3 {
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      margin-top: 10px;
    }
    ul {
      li {
        position: relative;
        padding-left: 12px;
        line-height: 40px;
        list-style: none;
        cursor: pointer;
        .chapter-name {
          color: #ddd;
          font-size: 16px;
          line-height: 48px;
          margin-right: 20px;
        }
        .resource {
          .resource-item {
            line-height: 30px;
            padding-left: 20px;
            transition: all 0.3s;
            color: #ccc;
            &:hover {
              color: #f20d0d;
              .resource-name {
                color: #f20d0d;
              }
            }
            .resource-icon {
              margin-right: 5px;
            }
            .resource-name {
              color: #ccc;
              font-size: 14px;
              line-height: 30px;
              margin-right: 20px;
            }
            .resource-btn {
              display: none;
            }
          }
        }
        .no-data {
          color: #999;
          padding-left: 20px;
        }
      }
    }
  }
  .line {
    height: 1px;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.2);
  }
}
</style>